<template>
    <view class="commodityDetails">
        <view class="commodityDetails_title">
            <view class="commodityDetails_mazi" @tap="openMazi">
                <text style="border-bottom:1rpx solid #ffb025">{{listMz[chooseId].size}}</text>
                <text>码</text>
            </view>
            <view class="commodityDetails_btn">
                <view class="commodityDetails_btn_color" style=" background: #ffb025;">
                    <view class="commodityDetails_btn_jiage">
                        <view>最低销售价格</view>
                        <view>￥{{detail.minSellerOfferAmount}}</view>
                    </view>
                    <view class="commodityDetails_goumai" @tap="urlTo('/pages/bidList/ineedBuyChoose','buy')">购买</view>
                </view>
                <view class="fontsize" @tap="urlTo('/pages/personalCenter/price')">全部卖家售价</view>
            </view>
            <view class="commodityDetails_btn">
                <view class="commodityDetails_btn_color" style=" background: #7bc162;">
                    <view class="commodityDetails_btn_jiage">
                        <view>最高买家出价</view>
                        <view>￥{{detail.maxBuyerOfferAmount}}</view>
                    </view>
                    <view class="commodityDetails_goumai" @tap="toCsFun">出售</view>
                </view>
                <view class="fontsize" @tap="urlTo('/pages/personalCenter/offer')">所有买家售价</view>
            </view>
        </view>
        <view class="swiper_img">
            <swiper indicator-dots='teur' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
                <view wx:for="{{imgUrls}}">
                    <swiper-item>
                        <image src="{{ item }}" mode="aspectFit" style="height: 150px"></image>
                    </swiper-item>
                </view>
            </swiper>
            <view>{{detail.name}}</view>
        </view>

        <view class="commodityDetails_biaoshi">
            <view @tap="urlTo('/pages/tj/introQuality')">
                <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/icon-tm2.png"></image>
                <view>买家流程</view>
            </view>
            <view @tap="urlTo('/pages/tj/introQuality')">
                <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/icon-tm.png"></image>
                <view>卖家流程</view>
            </view>
            <view @tap="urlTo('/pages/tj/introQuality')">
                <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/icon-tm3.png"></image>
                <view>正品保障</view>
            </view>
            <view @tap="urlTo('/pages/tj/introQuality')">
                <image class="item_img" src="https://gatherabc.oss-cn-qingdao.aliyuncs.com/xcx/icon-tm4.png"></image>
                <view>售后权益</view>
            </view>
        </view>
        <view class="clear"></view>

        <view class="commodityDetails_peisong">
            <view>
                <text style="padding-left: 40rpx;">配送</text>
                <text style="padding-left: 20rpx;overflow: hidden;text-overflow: ellipsis;font-size: 24rpx;height: 32rpx;">{{kdLog.name}}</text>
            </view>
            <view>
                <text>发售日期</text>
                <text style="padding-left: 20rpx;overflow: hidden;text-overflow: ellipsis;font-size: 24rpx;height: 32rpx;">{{detail.createTime}}</text>
            </view>
            <view>
                <text style="padding-left: 40rpx;">货号</text>
                <text style="padding-left: 20rpx;overflow: hidden;text-overflow: ellipsis;font-size: 24rpx;height: 32rpx;">{{detail.code}}</text>
            </view>
            <view>
                <text>不支持无理由退货</text>
            </view>
        </view>

        <view class="record_table">
            <view class="commodityDetails_tab_title">
                <view class="commodityDetails_tab_jilu">
                    <!-- 空的view是border -left-->
                    <view></view>
                    <view>相关商品</view>
                </view>
                <view class="commodityDetails_tab_quanbu" @tap="urlTo('/pages/classify/classMain','all')">全部</view>
            </view>
            <view class="correlation_list">
                <view wx:for="{{goodsRel}}" wx:key="item">
                    <navigator url="/pages/commodity/commodityDetails?id={{item.id}}">
                        <view class="correlation_img">
                            <image src="{{item.topicImage}}"></image>
                        </view>
                        <view class="view_p">{{item.name}}</view>
                        <view>￥{{item.amount}}</view>
                    </navigator>
                </view>
            </view>
        </view>

        <view class="record_table">
            <view class="commodityDetails_tab_title">
                <view class="commodityDetails_tab_jilu">
                    <!-- 空的view是border -left-->
                    <view></view>
                    <view>全部成交记录</view>
                </view>
                <view class="commodityDetails_tab_zuijin">最近购买</view>
                <view class="commodityDetails_tab_quanbu" @tap="urlTo('/pages/personalCenter/record')">全部</view>
            </view>
            <view class="record_tr">
                <!--暂无数据显示-->
                <placeholder wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
                <view class="record_td" wx:if="{{!is_empty}}" wx:for="{{goodsDeal}}" wx:key="item">
                    <image class="img" src="{{item.buyerAvatar}}"></image>
                    <text>{{item.buyerNickName}}</text>
                    <text>{{item.size}}</text>
                    <text>{{item.amount}}</text>
                    <text>{{item.createTime}}</text>
                </view>
            </view>
        </view>

        <!-- 码数  start-->
        <view class="sdd" wx:if="{{opencm}}" catchtouchmove='true'>
            <view>
                <view class="tab_list_guanbi">
                    <view class="viewPd">
                        <view></view>
                        <view>所有尺码</view>
                        <view @tap="closeMaCi">
                            <i class="iconfont icon-guanbi1 "></i>
                        </view>
                    </view>
                </view>
                <!-- 码子列表 -->
                <view class="tba_list">
                    <view @tap="chooseMz" data-sizesId="{{index}}" class="tba_list_wis" wx:for="{{listMz}}" wx:key="index,item">
                        <!-- org这个类是控制点击的颜色 -->
                        <view class="tba_list_wis_mashu {{chooseId == index?'org':''}}">
                            <view>{{item.size}}</view>
                            <view>￥{{item.amount}}</view>
                        </view>
                    </view>
                </view>

            </view>
        </view>
        <!-- 码数 end-->
    </view>
</template>
<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {GOODSDETAIL, CHOOSECOU, SEL_CLASS_CODE} from '@/utils/constant'
    import Placeholder from '../../components/common/placeholder'

    export default class commodityDetails extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '商品详情' // 头部标题
      }
      components = {
        placeholder: Placeholder
      }
      data = {
        listMz: [],
        imgUrls: [],
        indicatorDots: false,
        autoplay: false,
        interval: 5000,
        duration: 1000,
        form: {},
        form2: {
          page: 1,
          limit: 3
        },
        detail: '',
        kdLog: '',
        goodsDeal: '',
        goodsRel: '',
        is_empty: false,
        opencm: false,
        chooseId: 0,
        imagesW: 0
      }
      methods = {
        // 方法
        urlTo(url, type) {
          const t = this
          wx.removeStorageSync(CHOOSECOU)
          wx.removeStorageSync('purOrderAddressId')
          if (type == 'all') {
            wepy.setStorageSync(SEL_CLASS_CODE, t.detail.categoryId)
            wx.navigateTo({
              url: url
            })
          } else {
            wx.navigateTo({
              url: url
            })
          }
        },
        openMazi() {
          const t = this
          t.opencm = t.opencm ? false : true
        },
        closeMaCi() {
          const t = this
          t.opencm = t.opencm ? false : true
        },
        chooseMz(e) {
          const t = this
          t.chooseId = e.currentTarget.dataset.sizesid
          t.opencm = t.opencm ? false : true
          t.form['size'] = t.listMz[t.chooseId].size
          t.getChildCate()
        },
        toCsFun() {
          const t = this
          t.yjState()
        }
      }

      /**
       * 获取商品详情
       * @returns {Promise.<void>}
       */
      async getChildCate() {
        const t = this
        const a = await api.goodsDetail({
          query: t.form
        })
        if (a.data.code == 0) {
          let l = a.data.data
          t.detail = l
          t.detail.createTime = new Date(t.detail.createTime).toLocaleDateString().replace(/\//g, "-");
          t.imgUrls = l.detailImages.split(',')
          l.size = t.form['size']
          l.kdLog = t.kdLog
          wepy.setStorageSync(GOODSDETAIL, l)
          t.goodsDealFun()
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 获取默认快递
       * @returns {Promise.<void>}
       */
      async logGetUseableFun() {
        const t = this
        const a = await api.logGetUseable({
          query: t.form
        })
        if (a.data.code == 0) {
          let l = a.data.data,
            i = 0
          l.forEach(r => {
            i++
            if (r.code == 'SF') {
              t.kdLog = r
            }
          })
          if (i) {
            t.kdLog = l[0]
          } else {
            tip.alert('无默认快递！', 3000)
          }
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 获取最近成交记录
       * @returns {Promise.<void>}
       */
      async goodsDealFun() {
        const t = this
        t.form2['params[size]'] = t.detail.size
        t.form2['params[goodsId]'] = t.detail.id
        const a = await api.goodsDeal({
          query: t.form2
        })
        if (a.data.code == 0) {
          t.goodsDeal = a.data.data.rows
          if (!t.goodsDeal || t.goodsDeal[0] == null || t.goodsDeal.length == 0) {
            t.is_empty = true
          } else {
            t.is_empty = false
          }
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 获取相关的商品
       * @returns {Promise.<void>}
       */
      async goodsRelationFun() {
        const t = this
        const a = await api.goodsRelation({}, t.form['goodsId'])
        if (a.data.code == 0) {
          t.goodsRel = a.data.data
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 获取尺寸的最低售价
       * @returns {Promise.<void>}
       */
      async cmGet() {
        const t = this
        const a = await api.goodsSizeAndMinAmount({}, t.form['goodsId'])
        if (a.data.code == 0) {
          t.listMz = a.data.data
          t.form['size'] = t.listMz[t.chooseId].size
          t.getChildCate()
        } else {
          tip.error(a.data.msg)
        }
      }

      /**
       * 获取押金缴纳情况
       * @returns {Promise.<void>}
       */
      async yjState() {
        const t = this
        const a = await api.disGetByUserId({}, t.userId)
          const a2 = await api.getJfPrice()
          if(a2.data.code == 0){
              wx.removeStorageSync(CHOOSECOU)
              if ( a2.data.data.deposit <= 0) {
                  wepy.navigateTo({
                      url: '/pages/bidList/sellerBid'
                  })
              }else {
                  if (a.data.code == 0) {
                      if (!a.data.data) {
                          wepy.navigateTo({
                              url: '/pages/tj/payDeposit'
                          })
                      } else {
                          wepy.navigateTo({
                              url: '/pages/bidList/sellerBid'
                          })
                      }
                  } else {
                      tip.error(a.data.msg)
                  }
              }
          }else {
              tip.error(a.data.msg)
          }
      }

      onLoad(r) {
        const t = this
        if (r.id) {
          t.userId = wepy.getStorageSync('userId')
          t.form['goodsId'] = r.id
          t.chooseId = 0
          t.cmGet()
          t.logGetUseableFun()
          t.goodsRelationFun()
          t.$apply()
        }
      }
    }
</script>
<style lang="less">
.commodityDetails {
    .commodityDetails_title {
        background: #fff;
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #e6e6e6;
        .commodityDetails_mazi {
            width: 14%;
            border-right: 1px solid #e6e6e6;
            text-align: center;
            line-height: 190rpx;
        }
        .commodityDetails_btn {
            text-align: center;
            width: 43%;
            padding-top: 20rpx;
            .commodityDetails_btn_color {
                width: 300rpx;
                margin: 0 auto;
                border-radius: 10rpx;
                padding: 4rpx 0;
                display: flex;
                justify-content: flex-start;
                .commodityDetails_btn_jiage {
                    width: 200rpx;
                    border-right: 1px solid #fff;
                    padding: 10rpx 0;
                    > view:first-child {
                        font-size: 26rpx;
                    }
                    view {
                        color: #fff;
                    }
                }
                .commodityDetails_goumai {
                    color: #fff;
                    width: 100rpx;
                    line-height: 100rpx;
                }
            }
            .fontsize {
                font-size: 26rpx;
                padding: 10rpx 0;
            }
        }
    }
    .swiper_img {
        background: #fff;
        text-align: center;
        padding: 40rpx 0;
        border-bottom: 1px solid #e6e6e6;
    }
    .commodityDetails_biaoshi {
        margin-top: 20rpx;
        padding: 30rpx 0;
        display: flex;
        justify-content: flex-start;
        text-align: center;
        background: #fff;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        > view {
            width: 25%;
            i {
                color: #ffb025;
            }
            > view {
                font-size: 26rpx;
            }
        }
        .item_img {
            width: 48rpx;
            height: 48rpx;
        }
    }
    .commodityDetails_peisong {
        overflow: hidden;
        margin-top: 20rpx;
        padding: 20rpx 0rpx 10rpx 0rpx;
        border-top: 1px solid #e6e6e6;
        border-bottom: 1px solid #e6e6e6;
        background: #fff;
        > view {
            float: left;
            width: 50%;
            padding-bottom: 10rpx;
        }
    }
    .record_table {
        background: #fff;
        margin-top: 20rpx;
        .commodityDetails_tab_title {
            margin: 0rpx 40rpx;
            padding: 20rpx 0;
            position: relative;
            border-bottom: 1px solid #e6e6e6;
            .commodityDetails_tab_jilu {
                position: relative;
                > view:first-child {
                    height: 30rpx;
                    width: 4rpx;
                    background: #ffb025;
                    position: absolute;
                    left: 0;
                    top: 10rpx;
                }
                > view:last-child {
                    padding-left: 20rpx;
                    color: #333;
                }
            }
            .commodityDetails_tab_zuijin {
                color: #666;
                font-size: 26rpx;
                padding-top: 15rpx;
            }
            .commodityDetails_tab_quanbu {
                position: absolute;
                right: 0rpx;
                top: 18rpx;
                color: #ffb025;
            }
        }
        .record_tr {
            padding: 0 20rpx;
            .record_td {
                display: flex;
                height: 100rpx;
                line-height: 100rpx;
                border-bottom: 1px solid #ddd;
                i {
                    width: 120rpx;
                    font-size: 60rpx !important;
                    text-align: center;
                    vertical-align: middle;
                    color: #000;
                }
                text {
                    width: 120rpx;
                    vertical-align: middle;
                }
                text:last-child {
                    text-align: center;
                    margin-left: 40rpx;
                    padding-right: 20rpx;
                }
                .img {
                    width: 50rpx;
                    height: 50rpx;
                    margin: 20rpx;
                }
            }
        }

        .correlation_list {
            display: flex;
            justify-content: flex-start;
            > view {
                width: 33%;
                text-align: center;
                .correlation_img {
                    width: 200rpx;
                    height: 200rpx;
                    margin: 0 auto;
                    margin-top: 20rpx;
                    margin-bottom: 20rpx;
                    image {
                        width: 100%;
                        height: 100%;
                    }
                }
                .view_p {
                    font-size: 24rpx;
                }
            }
        }
    }
    //码子选择
    .sdd {
        position: fixed;
        top: 0;
        height: 100%;
        width: 100%;
        background: rgba(51, 51, 51, 0.356);
        z-index: 9999;
        .org {
            background: #ffb025 !important;
            view {
                color: #fff !important;
            }
        }
        .tab_list_guanbi {
            background: #fff;
            padding: 20rpx 0;
            .viewPd {
                padding: 0 20rpx;
                display: flex;
                > view {
                    width: 33.3%;
                    color: #333;
                }
                > view:nth-child(2) {
                    text-align: center;
                }
                > view:nth-child(3) {
                    text-align: right;
                }
            }
        }
        > view {
            background: #f5f5f9;
            position: absolute;
            bottom: 0;
            width: 100%;

            .tba_list {
                overflow: hidden;
                width: 96%;
                padding: 2%;
                .tba_list_wis {
                    width: 25%;
                    float: left;
                    .tba_list_wis_mashu {
                        background: #fff;
                        margin: 6rpx;
                        text-align: center;
                        padding: 5rpx 0;
                        > view:nth-child(2) {
                            color: #999;
                        }
                    }
                }
            }
        }
    }
    //码子选择
    .empty-placeholder {
        padding-bottom: 150rpx;
    }
}
.clear {
    clear: both;
}
</style>
